<template>
    <div class="box-view">
                <el-form :model="formData" 
				:label-position="labelPosition"
				:rules="rules" ref="form" label-width="90px">
					<el-form-item label="报告号:" prop="reportNo" :label-width="labelWidth">
					     <el-input size="mini" clearable v-model="formData.reportNo" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目名称:" prop="projectName" :label-width="labelWidth">
					     <el-input size="mini" clearable v-model="formData.projectName" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目规模:" prop="projectScale" :label-width="labelWidth">
					     <el-input size="mini" clearable v-model="formData.projectScale" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目接收期" prop="receiveDate" :label-width="labelWidth">
					          <el-date-picker
					            v-model="formData.receiveDate"
					            type="date"
					            placeholder="选择日期">
					          </el-date-picker>
					</el-form-item>
					<el-form-item label="项目经营方式:" prop="operateMode" :label-width="labelWidth">
					     <el-input size="mini" clearable v-model="formData.operateMode" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="联营收费比例:" prop="poolExpenseRatio" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.poolExpenseRatio" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="挂靠收费比例:" prop="affiliatedExpenseRatio" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.affiliatedExpenseRatio" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="挂靠单位名称:" prop="affiliatedUnit" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.affiliatedUnit" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目专业大类:" prop="majorCategory" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.majorCategory" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目类别:" prop="projectCategory" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.projectCategory" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="委托单位全称:" prop="entrustCompanyName" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.entrustCompanyName" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="联系人:" prop="contacts" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.contacts" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="电话:" prop="contactPhone" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.contactPhone" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="职务:" prop="position" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.position" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item :label-width="labelWidth" label="合同签订情况" prop="contractStatus">
					      <el-select size="mini" 
					        clearable
					        v-model="formData.contractStatus" 
					        placeholder="">
					        <el-option
					          v-for="item in options"
					          :key="item.value"
					          :label="item.label"
					          :value="item.value">
					        </el-option>
					      </el-select>
					</el-form-item>
					<el-form-item label="合同暂估金额:" prop="estimatedAmount" :label-width="labelWidth">
						 <el-input size="mini" clearable v-model="formData.estimatedAmount" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="合同支付条款:"  :label-width="labelWidth">
						<!-- paymentTermsList 合同支付条款-->
						<el-button style="margin-bottom:20px;" type="primary"  icon="el-icon-plus" @click="addClause">新增条款</el-button>
						<div v-for="(item,index) in clauseData">
							<el-input style="width:25%" size="mini" clearable v-model="item.content" placeholder="请输入条款内容"></el-input>
							<el-input 
							style="width:25%;margin-right:3%;margin-left:3%;" 
							size="mini" clearable v-model="formData.amount" placeholder="请输入付款比例"></el-input>
							<el-input style="width:25%" size="mini" clearable v-model="formData.ratio" placeholder="请输入付款金额"></el-input>
							<el-button type="" style="margin-left:3%;" @click="deletClause(index)">删除</el-button>
						</div>
					</el-form-item>
					<el-form-item label="收款(支出)账户:" :label-width="labelWidth" prop="collectionAccount">
						 <el-input size="mini" type="info" clearable v-model="formData.collectionAccount" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="报告出具情况:" :label-width="labelWidth">
						<el-select size="mini"
						  clearable
						  v-model="formData.issuanceOfReport" 
						  placeholder="">
						  <el-option
						    v-for="item in options1"
						    :key="item.value"
						    :label="item.label"
						    :value="item.value">
						  </el-option>
						</el-select>
						 <!-- <el-input size="mini" clearable v-model="formData.issuanceOfReport" placeholder="请输入内容"></el-input> -->
				     </el-form-item>
					<el-form-item label="项目二级复核:" :label-width="labelWidth" prop="secondaryReview">
						 <el-input size="mini" clearable v-model="formData.secondaryReview" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="项目负责人:" :label-width="labelWidth" prop="projectLeader">
						 <el-input size="mini" clearable v-model="formData.projectLeader" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="任务单签发情况:" :label-width="labelWidth" prop="taskOrderIssuance">
						 <el-input size="mini" clearable v-model="formData.taskOrderIssuance" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="工程造价:" :label-width="labelWidth" prop="engineeringCost">
						 <el-input size="mini" clearable v-model="formData.engineeringCost" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="合同金额(元):" :label-width="labelWidth" prop="contractAmount">
						 <el-input size="mini" clearable v-model="formData.contractAmount" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="上传报告板:" :label-width="labelWidth" prop="reportBoard">
						<el-upload
						  class="upload-demo"
						  :action="action"
						  :on-preview="handlePreview"
						  :on-remove="handleRemove"
						  :before-remove="beforeRemove"
						  :on-success="handleSucc1"
						  :headers="headers"
						  multiple
						  :limit="3"
						  :on-exceed="handleExceed"
						  >
						  <el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
						 <!-- <el-input size="mini" clearable v-model="formData.reportBoard" placeholder="请输入内容"></el-input> -->
					</el-form-item>
					<el-form-item label="合同扫描件:" :label-width="labelWidth" prop="scanningCopy">
						<el-upload
						  class="upload-demo"
						  :action="action"
						  :on-success="handleSucc2"
						  :on-preview="handlePreview"
						  :on-remove="handleRemove"
						  :before-remove="beforeRemove"
						  :headers="headers"
						  multiple
						  :limit="3"
						  :on-exceed="handleExceed"
						  >
						  <el-button size="small" type="primary">点击上传</el-button>
						</el-upload>
						 <!-- <el-input size="mini" clearable v-model="formData.scanningCopy" placeholder="请输入内容"></el-input> -->
					</el-form-item>
					<el-form-item label="项目三级复核:" :label-width="labelWidth" prop="threeLevelReview">
						 <el-input size="mini" clearable v-model="formData.threeLevelReview" placeholder="请输入内容"></el-input>
					</el-form-item>
					<el-form-item label="提成比例:" :label-width="labelWidth" prop="profitRatio">
						 <el-input size="mini" clearable v-model="formData.profitRatio" placeholder="请输入内容"></el-input>
					</el-form-item>
                </el-form>
				<template>
				  <div class="st-table">
				    <el-table :data="tableData" border style="width: 100%">
				      <el-table-column prop="userName" label="人员名称" width="100">
				        <template slot-scope="scope">
						  <el-input
						   size="mini"
							 v-model="scope.row.userName"
							 placeholder="请输入内容"></el-input>
				        </template>
				      </el-table-column>
				      <el-table-column prop="estimateProfitRatio" label="项目预估提成比例" >
				        <template slot-scope="scope">
				          <el-input
				           size="mini"
							 v-model="scope.row.estimateProfitRatio"
							 placeholder="请输入内容"></el-input>
				        </template>
				      </el-table-column>
				      <el-table-column prop="estimateProfitFee" label="项目预估提成费用">
				        <template slot-scope="scope">
						  <el-input
						 size="mini"
						 v-model="scope.row.estimateProfitFee"
						 placeholder="请输入内容"></el-input>
				        </template>
				      </el-table-column>
					  <el-table-column prop="costAmount" label="项目工作内容造价金额">
					    <template slot-scope="scope">
					      <el-input
						 size="mini"
						 v-model="scope.row.costAmount"
						 placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="jobContentRatio" label="项目工作内容占比">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.jobContentRatio"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="profitRatio" label="提成占比">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.profitRatio"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="personProfitFee" label="人员提成费用">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.personProfitFee"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="accruedExpensesOne" label="预提费用1">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.accruedExpensesOne"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="accruedExpensesTwo" label="预提费用2">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.accruedExpensesTwo"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="accruedExpensesThree" label="预提费用3">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.accruedExpensesThree"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="totalAccruedExpenses" label="累计预提费用">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.totalAccruedExpenses"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
					  <el-table-column prop="surplusFee" label="剩余提现费用">
					    <template slot-scope="scope">
					      <el-input
					      size="mini"
					      v-model="scope.row.surplusFee"
					      placeholder="请输入内容"></el-input>
					    </template>
					  </el-table-column>
				      <el-table-column label="操作">
				        <template slot-scope="scope">
				          <el-button type="warning" @click="deletTable(scope)">删除</el-button>
				        </template>
				      </el-table-column>
				    </el-table>
				  </div>
				</template>
			<div  slot="footer" class="dialog-footer" style="margin-top:30px;">
			    <el-button type="primary" size="medium" icon="el-icon-plus" style="padding:10px 50px;" @click="addUser">新增项目人员</el-button>
			</div >
			
            <div  slot="footer" class="dialog-footer" style="margin-top:30px;">
                <el-button type="primary" size="medium" style="padding:10px 50px;" @click="submit('rules')">保存资料</el-button>
            </div >
    </div>
</template>
<script>
import  {addProject}  from '@/api/project';
import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
	    options: [{
				value: '已签',
				label: '已签'
			  }, {
				value: '未签',
				label: '未签'
			  }],
		  options1: [{
				value: '已出',
				label: '已出'
			  }, {
				value: '未出',
				label: '未出'
			  }],
		  headers:{
			  Authorization:'',
		  },
		  action: 'http://47.108.92.210:8182/common/upload',//文件上传地址
		  formData:{
		  	reportNo:'',
		  	projectName:'',
		  	projectScale:'',
		  	receiveDate:'',
		  	operateMode:'',
		  	poolExpenseRatio:'',
		  	affiliatedExpenseRatio:'',
		  	affiliatedUnit:'',
		  	majorCategory:'',
		  	projectCategory:'',
		  	entrustCompanyName:'',
		  	contacts: '',
		  	contactPhone:'',
		  	position: '',
		  	contractStatus: '',
		  	estimatedAmount: '',
		  	paymentTermsList: [],//条款
		  	collectionAccount: '',
		  	issuanceOfReport: '',
		  	secondaryReview: '',
		  	taskOrderIssuance:'',
		  	engineeringCost: '',
		  	contractAmount: '',
		  	reportBoard: '',
		  	scanningCopy: '',
		  	threeLevelReview: '',
		  	profitRatio: '',
		  	bizPersonProfitList: [],//人员提成信息
		  },
		  
		  defaultClause:{
			  content:'',//条款内容
			  amount: '',//付款金额
			  ratio: '',//付款比例
		  },
		  clauseData:[
		  	{
		  		content:'',//条款内容
		  		amount: '',//付款金额
		  		ratio: '',//付款比例
		  	}
		  ],
		  userInfor:{
			  userName: '',
			  estimateProfitRatio: '',
			  estimateProfitFee: '',
			  costAmount: '',
			  jobContentRatio: '',
			  profitRatio: '',
			  personProfitFee: '',
			  accruedExpensesOne: '',
			  accruedExpensesTwo: '',
			  accruedExpensesThree: '',
			  totalAccruedExpenses: '',
			  surplusFee: ''
		  },
		list: [
			{label:'人员名称',prop:'userName',iStrue:true,tableType:'0'},
			{label:'项目预估提成比例',prop:'estimateProfitRatio',iStrue:true,tableType:'0'},
			{label:'项目预估提成费用',prop:'estimateProfitFee',iStrue:true,tableType:'0'},
			{label:'项目工作内容造价金额',prop:'costAmount',iStrue:true,tableType:'0'},
			{label:'项目工作内容占比',prop:'jobContentRatio',iStrue:true,tableType:'0'},
			{label:'提成占比',prop:'profitRatio',iStrue:true,tableType:'0'},
			{label:'人员提成费用',prop:'personProfitFee',iStrue:true,tableType:'0'},
			{label:'预提费用1',prop:'accruedExpensesOne',iStrue:true,tableType:'0'},
			{label:'预提费用2',prop:'accruedExpensesTwo',iStrue:true,tableType:'0'},
			{label:'预提费用3',prop:'accruedExpensesThree',iStrue:true,tableType:'0'},
			{label:'累计预提费用',prop:'totalAccruedExpenses',iStrue:true,tableType:'0'},
			{label:'剩余提现费用',prop:'surplusFee',iStrue:true,tableType:'0'}, 
		],
	
	    isClause: false,
        tableData:[
			{
				userName: '',
				estimateProfitRatio: '',
				estimateProfitFee: '',
				costAmount: '',
				jobContentRatio: '',
				profitRatio: '',
				personProfitFee: '',
				accruedExpensesOne: '',
				accruedExpensesTwo: '',
				accruedExpensesThree: '',
				totalAccruedExpenses: '',
				surplusFee: ''
			}
		],
		
	    labelWidth:'250px',
	    labelPosition: 'center',
	    form:{
		   data:{
			   reportNo:'',
			   
		   }
	   },
	   rules: {
	       reportNo: [ { required: true, message: '此项不能为空', trigger: 'blur' }],
	       projectName: [ { required: true, message: '此项不能为空', trigger: 'blur' }],
	       projectScale: [ { required: true, message: '此项不能为空', trigger: 'blur' }],
	     },
      };
    },
	created(){
		
		this.headers.Authorization = getToken()
	},
    methods: {
		//上传返回
		handleSucc1(res){
			console.log(res)
			this.formData.reportBoard = res.url
		},
		handleSucc2(res){
			//合同扫描件
			this.formData.scanningCopy = res.url
		},
		 handleRemove(file, fileList) {
		        console.log(file, fileList);
		  },
		  handlePreview(file) {
			console.log(file);
		  },
		  handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		  },
		  beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${ file.name }？`);
		  },
		  handleSucc(res){
			  console.log(res,123)
		  },
		addClause(){
			this.clauseData.push(this.defaultClause)
		},
		deletClause(index){
			this.clauseData.splice(index,1)
		},
		deletTable(userInfor){
			this.tableData.splice(userInfor.$index,1)
		},
		addUser(){
			this.tableData.push(this.userInfor)
		},
		submit(){
			console.log(this.formData)
			this.formData.paymentTermsList = this.clauseData; //服务条款
			this.formData.bizPersonProfitList = this.tableData;// 人员提成信息
			this.$refs['form'].validate((valid) => {
			   console.log(valid,this.formData)
			  if (valid) {
			   addProject(this.formData).then((res)=>{
					console.log(res)
					this.$emit('changData',res)
			   })
				   
			  } else {
			    return false;
			  }
			})
		}
    }
  }
</script>
<style scoped>
.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}
.box-view{
    text-align: center;
}
</style>